<template>
	<view class="" :style="{'height':windowHeight+'px'}">
		<view class="page_scoll" :style="{'height':(windowHeight-50)+'px'}">
			<view class="" >
				<step1 ref="step1" :carName="carName" v-show="active=='0'"></step1>
				<step2 ref="step2" v-show="active=='1'"></step2>
				<step3 ref="step3" v-show="active=='2'"></step3>
				<step4 ref="step4" v-show="active=='3'"></step4>
				<step5 ref="step5" v-show="active=='4'"></step5>
			</view>
			<view style="height: 100rpx;;">

			</view>
		</view>
		<view class="btn_box">
			<view class="pre_btn" @click="preBtn" v-if="active!='0'">
				上一步
			</view>
			<view class="next_btn" @click="nextBtn" v-if="active!='4'" :style="active==0?'width: 100%':'width: 60%'">
				下一步
			</view>
			<view class="next_btn"  @click="nextBtn" v-if="active=='4'" :style="active==0?'width: 100%':'width: 60%'">
				完成
			</view>
		</view>
		<u-modal v-model="modelShow" :content="content"></u-modal>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	import app from "../../App.vue"
	import step1 from './hw01.vue'
	import step2 from './hw02.vue'
	import step3 from './hw03.vue'
	import step4 from './hw04.vue'
	import step5 from './hw05.vue'
	export default {
		components: {
			step1,
			step2,
			step3,
			step4,
			step5
		},
		data() {
			return {
				form: {},
				active: "0",
				modelShow:false,
				content:"",
				carName:"",
				windowHeight: "", //获取屏幕高度
			}
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
					console.log(that.windowHeight)
				}
			})
		},
		onShow() {
			console.log(app.globalData.carTypeName)
			if (app.globalData.carTypeName) {
					this.carName = app.globalData.carTypeName
			} else {
				this.carName = '请选择车型'
			}
		},
		methods: {
			preBtn() {
				this.active--
			},
			nextBtn() {
				console.log(this.active)
				if (this.active == '0') {
					this.active++
				} else if (this.active == '1') {
					// this.form.classifyNo = this.$refs.step2.form[0];
					// this.form.sexName = this.$refs.step2.form[1];
					// this.form.colorName = this.$refs.step2.form[2];
					// this.form.levelName = this.$refs.step2.form[3];
					// this.form.needleHair = this.$refs.step2.form[4];
					// this.form.colorLustre = this.$refs.step2.form[5];
					// this.form.definition = this.$refs.step2.form[6];
					// this.form.damageDirection = this.$refs.step2.form[7];
					// this.form.problemDegree = this.$refs.step2.form[8];
					// this.form.damageLevel = this.$refs.step2.form[9];
					this.active++
				} else if (this.active == '2') { //下一步
					// this.form.sonList = this.$refs.step4.form.sonList
					// console.log(this.form)
					this.active++

				} else if (this.active == '3') { //下一步
					this.active++
				} 
				 else if (this.active == '4') { //完成打把
					this.save()
				}

			},
			save() {
				uni.navigateTo({
					url:"./batteryReportDetail"
				})
			}
		}
	}
</script>
<style scoped>

	.page {
		position: relative;
		overflow: hidden;
	}

	.page_scoll {
		overflow-y: scroll;
	}

	.btn_box {
		width: 100%;
		position: absolute;
		display: flex;
		bottom: 0px;
		text-align: center;
		font-size: 30rpx;
	}

	.pre_btn {
		background: #FFFFFF;
		color: #000;
		width: 40%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.next_btn {
		background: #002B56;
		color: #fff;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
